<template>
	<view>
	<uni-nav-bar background-color="#3286ed" :statusBar="true" :fixed='true' color="#fff" title="OA审批" left-icon="left"   @clickLeft="backFn"  ></uni-nav-bar>
	<view class="module">
		<view class="module-item" >
		<uni-icons color="#3286ed" custom-prefix="iconfont" type="icon-daichuli" size="30"  class="iconBox" style="font-size: 30px;background-color: #fff;"></uni-icons>
		<text    :class="{active:index===0}">待处理</text>	 
		</view>
		<view class="module-item" >
		<uni-icons color="#3286ed" custom-prefix="iconfont" type="icon-yichuli" size="30"  class="iconBox" style="font-size: 30px;background-color: #fff;"></uni-icons>
		<text    :class="{active:index===0}">已处理</text>	 
		</view>
		<view class="module-item" >
		<uni-icons color="#3286ed" custom-prefix="iconfont" type="icon-icon_xinyong_xianxing_jijin-" size="30"  class="iconBox" style="font-size: 30px;background-color: #fff;"></uni-icons>
		<text    :class="{active:index===0}">已发起</text>	 
		</view>
		<view class="module-item" >
		<uni-icons color="#3286ed" custom-prefix="iconfont" type="icon-icon-contract" size="30"  class="iconBox" style="font-size: 30px;background-color: #fff;"></uni-icons>
		<text    :class="{active:index===0}">我收到的</text>	 
		</view>
	</view>
	<!-- 签到 -->
	<view class="image">
		<view class="image-item">
			<image style="width: 125px;height: 65px;border-radius: 10px;" src="../../static/images/qaindao.png" mode="aspectFit"></image>
		</view>
		<view class="image-item" >
			<image style="width: 125px;height: 65px;border-radius: 10px;" src="../../static/images/daka.png" mode="aspectFit"></image>
		</view>
	</view>
	<!-- tabs -->
	<view class="tabs">
		  <u-tabs :list="list1" @click="click" lineWidth="40px"></u-tabs>
	</view>
	<!-- 功能模块 -->
	<view class="collaps">
		<u-collapse
		    :value="['1','2','3','4']"
			
		  >
		    <u-collapse-item title="法务管理" name="1" >
		     <view class="u-collapse-content collmodule">
		     	<view class="collmodule-item">
					<view style="width: 35px;height: 35px;background-color: #55b7f4;text-align: center;line-height: 35px;border-radius: 5px;">
		     		<uni-icons color="#fff" custom-prefix="iconfont" type="icon-hetong" size="30"  class="iconBox" ></uni-icons>
		     		</view>
					<text style="font-size: 10px;font-weight: 550;">智能合同审批</text>
		     	</view>
				
		     </view>
		    </u-collapse-item>
		    <u-collapse-item title="综合管理部" name="2">
		      <view class="u-collapse-content collmodule">
		      	<view class="collmodule-item" @click="outgoing">
					<view style="width: 35px;height: 35px;background-color: #55b7f4;text-align: center;line-height: 35px;border-radius: 5px;">
		      		<uni-icons color="#fff" custom-prefix="iconfont" type="icon-waichu2" size="30"  class="iconBox" ></uni-icons>
		      		</view>
					<text style="font-size: 10px;font-weight: 550;">外出</text>
		      	</view>
		      	<view class="collmodule-item" @click="leave">
					<view style="width: 35px;height: 35px;background-color: #55b7f4;text-align: center;line-height: 35px;border-radius: 5px;">
		      		<uni-icons color="#fff" custom-prefix="iconfont" type="icon-qingjiashenqing" size="27"  class="iconBox" ></uni-icons>
		      		</view>
					<text style="font-size: 10px;font-weight: 550;">请假</text>
		      	</view>			 
		      	<view class="collmodule-item">
					<view style="width: 35px;height: 35px;background-color: #55b7f4;text-align: center;line-height: 35px;border-radius: 5px;">
		      		<uni-icons color="#fff" custom-prefix="iconfont" type="icon-buqia" size="30"  class="iconBox" ></uni-icons>
		      		</view>
					<text style="font-size: 10px;font-weight: 550;">补假申请</text>
		      	</view>			
		      	<view class="collmodule-item">
					<view style="width: 35px;height: 35px;background-color: #fdad30;text-align: center;line-height: 35px;border-radius: 5px;">
						<uni-icons color="#fff" custom-prefix="iconfont" type="icon-jiabanshenqing" size="30"  class="iconBox" ></uni-icons>
					</view>
		      		<text style="font-size: 10px;font-weight: 550;">加班</text>
		      	</view>	
				<view class="collmodule-item">
					<view style="width: 35px;height: 35px;background-color: #fdad30;text-align: center;line-height: 35px;border-radius: 5px;">
					<uni-icons color="#fff" custom-prefix="iconfont" type="icon-shiyongyinzhang" size="30"  class="iconBox" ></uni-icons>
					</view>
					<text style="font-size: 10px;font-weight: 550;">用印申请</text>
				</view>
				<view class="collmodule-item">
					<view style="width: 35px;height: 35px;background-color: #fff;text-align: center;line-height: 35px;border-radius: 5px;">
					<uni-icons color="#55b7f4" custom-prefix="iconfont" type="icon-a-zhaodai1" size="35"  class="iconBox" ></uni-icons>
					</view>
					<text style="font-size: 10px;font-weight: 550;">招待申请</text>
				</view>
				<view class="collmodule-item">
					<view style="width: 35px;height: 35px;background-color: #55b7f4;text-align: center;line-height: 35px;border-radius: 5px;">
					<uni-icons color="#fff" custom-prefix="iconfont" type="icon-a-chucha3" size="30"  class="iconBox" ></uni-icons>
					</view>
					<text style="font-size: 10px;font-weight: 550;">出差申请</text>
				</view>
				<view class="collmodule-item">
					<view style="width: 35px;height: 35px;background-color: #f24341;text-align: center;line-height: 35px;border-radius: 5px;">
					<uni-icons color="#fff" custom-prefix="iconfont" type="icon-gongzitiao2" size="30"  class="iconBox" ></uni-icons>
					</view>
					<text style="font-size: 10px;font-weight: 550;">工资审批</text>
				</view>
				<view class="collmodule-item">
					<view style="width: 35px;height: 35px;background-color: #55b7f4;text-align: center;line-height: 35px;border-radius: 5px;">
					<uni-icons color="#fff" custom-prefix="iconfont" type="icon-tongyong1" size="25"  class="iconBox" ></uni-icons>
					</view>
					<text style="font-size: 10px;font-weight: 550;">通用审批</text>
				</view>		
		      </view>
		    </u-collapse-item>
		    <u-collapse-item title="财务管理" name="3">
		       <view class="u-collapse-content collmodule">
				   <view class="collmodule-item">
				   	<view style="width: 35px;height: 35px;background-color: #f24341;text-align: center;line-height: 35px;border-radius: 5px;">
				   	<uni-icons color="#fff" custom-prefix="iconfont" type="icon-wodegongzi" size="30"  class="iconBox" ></uni-icons>
				   	</view>
				   	<text style="font-size: 10px;font-weight: 550;">财务付款单</text>
				   </view>
				   <view class="collmodule-item">
				   	<view style="width: 35px;height: 35px;background-color: #f24341;text-align: center;line-height: 35px;border-radius: 5px;">
				   	<uni-icons color="#fff" custom-prefix="iconfont" type="icon-beiyongjin" size="25"  class="iconBox" ></uni-icons>
				   	</view>
				   	<text style="font-size: 10px;font-weight: 550;">备用金申请</text>
				   </view>
				   <view class="collmodule-item">
				   	<view style="width: 35px;height: 35px;background-color: #f24341;text-align: center;line-height: 35px;border-radius: 5px;">
				   	<uni-icons color="#fff" custom-prefix="iconfont" type="icon-zichantiaobo" size="27"  class="iconBox" ></uni-icons>
				   	</view>
				   	<text style="font-size: 10px;font-weight: 550;">财务资金调拨</text>
				   </view>
				</view>
		    </u-collapse-item>
			<u-collapse-item title="其他" name="4">
			  <view class="u-collapse-content collmodule">
			  	<view class="collmodule-item">
			  		<view style="width: 35px;height: 35px;background-color: #55b7f4;text-align: center;line-height: 35px;border-radius: 5px;">
			  		 <uni-icons color="#fff" custom-prefix="iconfont" type="icon-a-gongzuozongjie2" size="25"  class="iconBox" ></uni-icons>
			  		 </view>
			  		 <text style="font-size: 10px;font-weight: 550;">工作总结</text>
			  		</view>
				<view class="collmodule-item">
					<view style="width: 35px;height: 35px;background-color: #fdad30;text-align: center;line-height: 35px;border-radius: 5px;">
					 <uni-icons color="#fff" custom-prefix="iconfont" type="icon-lizhi2" size="30"  class="iconBox" ></uni-icons>
					 </view>
					 <text style="font-size: 10px;font-weight: 550;">离职</text>
					</view>
				<view class="collmodule-item">
					<view style="width: 35px;height: 35px;background-color: #f24341;text-align: center;line-height: 35px;border-radius: 5px;">
					 <uni-icons color="#fff" custom-prefix="iconfont" type="icon-jiaojieban" size="30"  class="iconBox" ></uni-icons>
					 </view>
					 <text style="font-size: 10px;font-weight: 550;">离职交接</text>
					</view>
				<view class="collmodule-item">
					<view style="width: 35px;height: 35px;background-color: #55b7f4;text-align: center;line-height: 35px;border-radius: 5px;">
					 <uni-icons color="#fff" custom-prefix="iconfont" type="icon-ruzhi2" size="30"  class="iconBox" ></uni-icons>
					 </view>
					 <text style="font-size: 10px;font-weight: 550;">入职审批</text>
					</view>
				<view class="collmodule-item">
					<view style="width: 35px;height: 35px;background-color: #fdad30;text-align: center;line-height: 35px;border-radius: 5px;">
					 <uni-icons color="#fff" custom-prefix="iconfont" type="icon-yuangongtiaogang" size="30"  class="iconBox" ></uni-icons>
					 </view>
					 <text style="font-size: 10px;font-weight: 550;">调岗</text>
					</view>
				<view class="collmodule-item">
					<view style="width: 35px;height: 35px;background-color: #55b7f4;text-align: center;line-height: 35px;border-radius: 5px;">
					 <uni-icons color="#fff" custom-prefix="iconfont" type="icon-zhuanzhengshenqing" size="30"  class="iconBox" ></uni-icons>
					 </view>
					 <text style="font-size: 10px;font-weight: 550;">转正</text>
					</view>							   
			 </view>
			</u-collapse-item>
		  </u-collapse>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1:[
					{name:'法务审批'},
					{name:'综合管理'},
					{name:'财务管理'},
					{name:'其他'},
				],
				index:null
			};
		},
		methods:{
			
			// 页面跳转
			// 外出
			outgoing(){
				uni.navigateTo({
					url:'/pages/OAPage/outgoing/outgoing'
				})
			},
			// 请假
			leave(){
				uni.navigateTo({
					url:"/pages/OAPage/leave/leave"
				})
			},
			
			
			backFn(){
				uni.navigateBack({delta:1})
			}
		}
	}
</script>

<style lang="scss">
.module{
		display: flex;
		justify-content: space-around;   /* 左对齐 */
		  flex-wrap: wrap;   /* 换行 */
		  background-color: #fff;
	}
	.module-item{
	    width: calc((100% ) / 4);
		display: flex;
		flex-direction: column;
		align-items:center;
		padding: 15px 0;
		
	}
	.image{
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #fff;
		width: 100%;
		height: 110px;
		margin-top: 2px;
		 
		.image-item{
			width: calc((100% ) / 2);
			text-align: center;
			
		}
		
	}
	.tabs{
		background-color: #fff;
		margin-top: 2px;
		padding-bottom: 20px;
	}
	.collaps{
		background-color: #fff;
	}
	.collmodule{
		display: flex;
		justify-content: flex-start;   /* 左对齐 */
		  flex-wrap: wrap;   /* 换行 */
		  background-color: #fff;
		  
		.collmodule-item{
			width: calc((100% ) / 4);
			height: 70px;
			display: flex;
			flex-direction: column;
			align-items:center;
			
		}
	}
</style>
